<template>
  <div>
    <!--新增，编辑弹框-->
    <el-dialog title="个人碳足迹" :before-close="beforeClose"
               :visible.sync="visible" :close-on-click-modal="false" @opened="opened" class="datav-dialog" width="60%">
      <el-tabs
        type="border-card"
        v-model="activeName"
        @tab-click="tabClick"
        stretch="true">
        <el-tab-pane name="first" label="衣" class="tabItem">
          <div class="flexColumn">
            <div class="flexRow">
              <div class="flexColumn flex1">
                <div class="inputTop">
                  <span>年份</span>
                </div>
                <div class="inputBottom">
                  <el-date-picker
                    type="year"
                    v-model="year"
                    @change="yearChange"
                    placeholder="选择年">
                  </el-date-picker>
                </div>
              </div>
              <div class="flexColumn flex2">
                <div class="inputTop">
                  <span>月份</span>
                </div>
                <div class="inputBottom">
                  <el-date-picker
                    v-model="month"
                    type="month"
                    placeholder="选择月">
                  </el-date-picker>
                </div>
              </div>
            <div class="flexRow">
              <span class="title2">
                您在服装方面消费的数量：
              </span>
            </div>
              <div class="flexRow">
                <div class="inputItem" v-for="item in clothes" :key="item.value">
                  <div class="inputTop">
                    {{ item.label }}
                  </div>
                  <div class="inputBottom">
                    <el-input-number  :controls="false"  size="mini"   v-model="item.value"></el-input-number>
                  </div>
                </div>
              </div>
              <div class="flexR jcaicenter">
                <div class="bottomButton">

                  <el-button type="primary" size="smaller" @click="updateActiveName('second')">下一步</el-button>
                </div>
              </div>

            </div>

          </div>


        </el-tab-pane>

        <el-tab-pane name="second" label="食" class="tabItem">

          <el-card class="box-card mb">
            <div slot="header" class="clearfix">
              <span class="title2">您在食物方面的消费量：</span>
            </div>
            <div class="cardBody">
              <div class="flexRow">
                <div class="inputItem" v-for="item in foods" :key="item.value">
                  <div class="inputTop">
                    {{ item.label }}
                  </div>
                  <div class="inputBottom">
                    <el-input-number  :controls="false"  size="mini"   v-model="item.value"></el-input-number>
                  </div>
                </div>
              </div>
              <div class="flexR jcaicenter">
                <div class="bottomButton">
                  <el-button type="primary" size="smaller" @click="updateActiveName('first')">上一步</el-button>
                  <el-button type="primary" size="smaller" @click="updateActiveName('third')">下一步</el-button>
                </div>
              </div>
            </div>
          </el-card>
        </el-tab-pane>

        <el-tab-pane name="third" label="住 " class="tabItem">
          <el-card class="box-card mb">
            <div slot="header" class="clearfix">
              <span class="title2">您在取暖装修生活方面的消耗：</span>
            </div>
            <div class="cardBody">
              <div class="flexRow">
                <div class="inputItem" v-for="item in live" :key="item.value">
                  <div class="inputTop">
                    {{ item.label }}
                  </div>
                  <div class="inputBottom">
                    <el-input-number  :controls="false"  size="mini"   v-model="item.value"></el-input-number>
                  </div>
                </div>
              </div>
              <div class="flexR jcaicenter">
                <div class="bottomButton">
                  <el-button type="primary" size="smaller" @click="updateActiveName('second')">上一步</el-button>
                  <el-button type="primary" size="smaller" @click="updateActiveName('fourth')">下一步</el-button>
                </div>
              </div>
            </div>
          </el-card>

        </el-tab-pane>
        <el-tab-pane name="fourth" label="行" class="tabItem">
          <el-card class="box-card mb">
            <div slot="header" class="clearfix">
              <span class="title2">您在交通上的消耗：</span>
            </div>
            <div class="cardBody">
              <div class="flexRow">
                <div class="inputItem" v-for="item in travel" :key="item.value">
                  <div class="inputTop">
                    {{ item.label }}
                  </div>
                  <div class="inputBottom">
                    <el-input-number  :controls="false"  size="mini"   v-model="item.value"></el-input-number>
                  </div>
                </div>
              </div>
              <div class="flexR jcaicenter">
                <div class="bottomButton">
                  <el-button type="primary" size="smaller" @click="updateActiveName('third')">上一步</el-button>
                  <el-button type="primary" size="smaller" @click="updateActiveName('firth')">下一步</el-button>
                </div>
              </div>
            </div>
          </el-card>
        </el-tab-pane>
        <el-tab-pane name="firth" label="用" class="tabItem">
          <el-card class="box-card mb">
            <div slot="header" class="clearfix">
              <span class="title2">您在其它用品上的消耗量：</span>
            </div>
            <div class="cardBody">
              <div class="flexRow">
                <div class="inputItem" v-for="item in used" :key="item.value">
                  <div class="inputTop">
                    {{ item.label }}
                  </div>
                  <div class="inputBottom">
                    <el-input-number  :controls="false"  size="mini"   v-model="item.value"></el-input-number>
                  </div>
                </div>
              </div>
              <div class="flexR jcaicenter">
                <div class="bottomButton">
                  <el-button type="primary" size="smaller" @click="updateActiveName('fourth')">上一步</el-button>
                </div>
              </div>
            </div>
          </el-card>
        </el-tab-pane>
        <!--          <el-tab-pane name="first" label="基础信息" class="tabItem"></el-tab-pane>-->
        <!--            <el-tab-pane name="first" label="基础信息" class="tabItem"></el-tab-pane>-->
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>

export default {
  data() {
    return {
      activeName: "first",
      year: null,
      month: null,
      selHangYe: '',
      num0: 0,
      clothes:[{
        value:1,
        label:`洗衣液（升）`
      },{
        value:1,
        label:`上衣（件）`
      },{
        value:1,
        label:`裤子（条）`
      },{
        value:1,
        label:`连衣裙（件）`
      },{
        value:1,
        label:`西服套装（件）`
      },{
        value:1,
        label:`袜子（双）`
      },{
        value:1,
        label:`围巾（条）`
      },{
        value:1,
        label:`领带（条）`
      },],
      foods:[{
        value:1,
        label:`粮食消费（千克）`
      },{
        value:1,
        label:`羊肉（千克）`
      },{
        value:1,
        label:`牛肉（千克）`
      },{
        value:1,
        label:`猪肉（千克）`
      },{
        value:1,
        label:`鸡蛋（千克）`
      },{
        value:1,
        label:`鸡肉（千克）`
      },{
        value:1,
        label:`牛奶(千克)`
      },{
        value:1,
        label:`鱼肉(千克)`
      },{
        value:1,
        label:`虾蟹(千克)`
      },{
        value:1,
        label:`有叶青菜(千克)`
      },{
        value:1,
        label:`土豆(千克)`
      },{
        value:1,
        label:`花生(千克)`
      },{
        value:1,
        label:`西蓝花(千克)`
      },{
        value:1,
        label:`西红柿(千克)`
      },{
        value:1,
        label:`扁豆(千克)`
      },{
        value:1,
        label:`豆腐(千克)`
      },{
        value:1,
        label:`水果(千克)`
      },{
        value:1,
        label:`酸奶(千克)`
      },{
        value:1,
        label:`饮料（千克）`
      },{
        value:1,
        label:`白酒（千克）`
      },{
        value:1,
        label:`红酒（千克）`
      },{
        value:1,
        label:`啤酒（瓶）`
      },{
        value:1,
        label:`吸烟（包）`
      },],
      live:[{
        value:0,
        label:`煤（吨）`
      },{
        value:0,
        label:`用电（度）`
      },{
        value:0,
        label:`用水（立方米）`
      },{
        value:0,
        label:`煤气（立方米）`
      },{
        value:0,
        label:`天然气（立方米）`
      },{
        value:0,
        label:`集中供暖(平方米)`
      },{
        value:0,
        label:`蜂窝煤（块）`
      },{
        value:0,
        label:`石油液化气（立方米）`
      },{
        value:0,
        label:`装修用陶瓷（千克）`
      },{
        value:0,
        label:`装修用钢材（千克）`
      },{
        value:0,
        label:`装修用铝材（平方米）`
      },{
        value:0,
        label:`装修用木材（立方米）`
      },],

      travel:[{
        value:0,
        label:`飞机（公里）`
      },{
        value:0,
        label:`火车（公里）`
      },{
        value:0,
        label:`轮船（公里）`
      },{
        value:0,
        label:`地铁（站）`
      },{
        value:0,
        label:`公共汽车（公里）`
      },{
        value:0,
        label:`高耗油小汽车（公里）`
      },{
        value:0,
        label:`中耗油小汽车（公里）`
      },{
        value:0,
        label:`低耗油小汽车（公里）`
      },{
        value:0,
        label:`摩托车（公里）`
      },{
        value:0,
        label:`电动车（公里）`
      },],
      used:[{
        value:0,
        label:`纸制品（千克）`
      },{
        value:0,
        label:`塑料袋（个）`
      },{
        value:0,
        label:`塑料瓶（个）`
      },{
        value:0,
        label:`一次性筷子（双）`
      },{
        value:0,
        label:`厨余垃圾（千克）`
      },{
        value:0,
        label:`洗发水（瓶）`
      },{
        value:0,
        label:`上班使用电脑（小时）`
      },{
        value:0,
        label:`每月购买书籍（册）`
      },],
      total:[{
        value:0,
        label:`衣`
      },{
        value:0,
        label:`食`
      },{
        value:0,
        label:`住`
      },{
        value:0,
        label:`行`
      },{
        value:0,
        label:`用`
      },{
        value:0,
        label:`全球人均年碳足迹（kg）`
      },{
        value:0,
        label:`美国人均碳足迹`
      },{
        value:0,
        label:`中国城镇人均碳足迹（CEADS）`
      },{
        value:0,
        label:`您的碳足迹相当于全球人均碳足迹的`
      },{
        value:0,
        label:`您的碳足迹相当于全球人均碳足迹的`
      },{
        value:0,
        label:`您的碳足迹相当于美国人均碳足迹的`
      },],

    }
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  created() {

  },
  methods: {
    opened() {

    },
    yearChange() {
      this.month = this.year + '-01';
    },
    handleClose(key, keyPath) {

    },
    updateActiveName(data) {
      this.activeName = data
    },

    beforeClose() {
      this.$emit('update:visible', false); // 直接修改父组件的属性
    }
  }
}
</script>

<style>
@import "../../assets/styles/datav-dialog.scss";


</style>

<style scoped>
.datav-dialog{
 top:10vh;
}
.tabItem {
  padding: 20px;
}

.mb {
  margin-bottom: 10px;
}
.jcaicenter{
  justify-content: center;
  align-items: center;
}
.flexC{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.flexR{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.flexRow {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;
}

.flexColumn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}

.flex1 ,.flex2{
  width: 40%;
}


.cardBody {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.inputItem {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 5px 5px 5px 0px;

}

.inputBottom > * {
  flex-basis: 80px;
}

.inputTop {
  margin-bottom: 5px;
}
.title2{
  margin: 10px 0;
}

.inputBottom {
  width: auto;
  max-width: 100px;
}

.bottomButton {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px;
}

.bottomButton > button {
  margin-right: 20px;
}


</style>

